<template>
    <div class="rl_dataKb">
        <div class="head">
          <div class="swiper-container titles">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <span>人力流动看板</span>
              </div>
              <div class="swiper-slide">
                <span>人力结构看板</span>
              </div>
              <div class="swiper-slide">
                <span>人力数量看板</span>
              </div>
            </div>
          </div>
        </div>
        <div class="main">
            <div class="swiper-container pages">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <personnel-flow></personnel-flow>
                </div>
                <div class="swiper-slide">
                  <personnel-structure></personnel-structure>
                </div>
                <div class="swiper-slide">
                  <personnel-number></personnel-number>
                </div>
              </div>
              <!-- Add Arrows -->
              <div class="swiper-button-prev"></div>
              <div class="swiper-button-next"></div>
            </div>
        </div>
    </div>
</template>
<script>
import personnelStructure from "./personnelStructure"; // 人员结构
import personnelFlow from "./personnelFlow"; // 人员流动
import personnelNumber from "./personnelNumber"; // 人员数量
import Swiper from "swiper";
export default {
  name: "index",
  components: {
    personnelStructure,
    personnelFlow,
    personnelNumber
  },
  data() {
    return {};
  },
  mounted() {
    var titles = new Swiper(".titles", {
      initialSlide: 1
    });
    var pages = new Swiper(".pages", {
      initialSlide: 1,
      speed: 800,
      effect: "coverflow",
      grabCursor: false,
      centeredSlides: true,
      slidesPerView: "auto",
      coverflowEffect: {
        rotate: 70,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows: true
      },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
      }
    });
    titles.controller.control = pages;
    pages.controller.control = titles;
  },
  methods: {},
  lunbo() {}
};
</script>
<style lang="scss">
.rl_dataKb {
  .pages {
    width: 100%;
    height: 900px;
    .swiper-wrapper {
      .swiper-slide {
        width: 1458px;
        height: 900px;
        background: url("../../../../../../static/img/rl/back2.png") left center
          no-repeat / 100% 100%;
      }
    }
    .swiper-button-prev,
    .swiper-button-next {
      width: 111px;
      height: 72px;
      opacity: 1;
    }
    .swiper-button-prev {
      background: url("../../../../../../static/img/rl/prev.png") left center
        no-repeat / 100% 100%;
      animation: prev 1s linear infinite alternate forwards;
    }
    .swiper-button-next {
      background: url("../../../../../../static/img/rl/next.png") left center
        no-repeat / 100% 100%;
      animation: next 1s linear infinite alternate forwards;
    }
    .swiper-button-prev.swiper-button-disabled,
    .swiper-button-next.swiper-button-disabled {
      animation-duration: 0s;
    }
  }
  @keyframes prev {
    0% {
      transform: translateX(-10px);
    }
    100% {
      transform: translateX(0px);
    }
  }
  @keyframes next {
    0% {
      transform: translateX(10px);
    }
    100% {
      transform: translateX(0px);
    }
  }
}
</style>


<style lang="scss" scoped>
@import "../../../../../styles/base/_parameters";
$color: #29aae1;

.rl_dataKb {
  @include absoluteAllSides;
  .head {
    width: 878px;
    height: 140px;
    line-height: 110px;
    margin: -23px auto 0;
    color: $color;
    @include blod(32px);
    text-align: center;
    background: url("../../../../../../static/img/rl/head.png") center no-repeat;
    background-size: 100% 100%;
  }
  .main {
    @include absoluteAllSides(120, 0, 58, 0, 1);
  }
}
</style>
